<template>
    <div class="tk_view_box">
        <div class="tk_view_top flexbox flexcenter" @click="is_show = !is_show">
            <i class="el-icon-caret-right"></i>
            <div class="tk_view_left">
                <div class="tk_view_title">广告账户</div>
                <div class="tk_view_num">广告账户数量 x {{dataForm.advertiser_ids.length}}</div>
            </div>
        </div>
        <div class="tk_view_content" v-if="is_show">
            <el-table :data="selectBrand" max-height="340" class="view_table" ref="multipleTable">
                <el-table-column prop="advertiser_name" label="账户名称"></el-table-column>
                <el-table-column prop="advertiser_id" label="账户ID"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    props: ["dataForm"],
    components: {},
    name: "",
    data() {
        return {
            is_show:false,
            tableData:[],
            adverList:[],
        };
    },
    created() {
        this.getAdverList()
    },
    computed:{
        selectBrand(){
            let arr = []
            for(let i in this.adverList){
                for(let a in this.dataForm.advertiser_ids){
                    if(this.adverList[i].advertiser_id==this.dataForm.advertiser_ids[a]){
                        arr.push(this.adverList[i])
                    }
                }
            }
            return arr
        },
    },
    methods: {
         //获取广告账户列表
        async getAdverList() {
            const { data: res } = await this.$http.post(
                this.$tiktokUrl + "launch/TiktokInfo/advertiserList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.adverList = res.data.list;
            }
        },
    },
};
</script>


<style scoped>
.tk_view_box{
    margin-bottom: 10px;
}
.tk_view_top {
    height: 65px;
    padding: 0 20px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: rgba(165, 177, 209, 0.1);
    cursor: pointer;
}
.tk_view_top .el-icon-caret-right {
    font-size: 18px;
    color: #616c85;
}
.tk_view_left {
    margin-left: 20px;
}
.tk_view_title {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
}
.tk_view_num {
    font-size: 12px;
    color: #b4b7bd;
    line-height: 17px;
    margin-top: 4px;
}
.tk_view_content {
    border: 1px solid #ebebeb;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top: 0;
    padding: 0 20px;
}
/deep/ .view_table.el-table th{
    background-color: #fff;
    font-weight: normal;
}
/deep/ .view_table.el-table th.is-leaf{
    border-bottom: 1px solid #f1f2f3 !important;
}
/deep/ .view_table.el-table::before{
    display: none;
}
</style>

